<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎您登录SentCMS管理平台</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/login.css" media="all">
</head>
<body id="login-page">
    <div id="main-content">

        <!-- 主体 -->
        <div class="login-body">
            <div class="login-main pr">
                <form action="{:U('login')}" method="post" class="login-form">
                    <h3 class="welcome"><i class="login-logo"></i>SentCMS管理平台</h3>
                    <div id="itemBox" class="item-box">
                        <div class="item">
                            <i class="icon-login-user"></i>
                            <input type="text" name="username" placeholder="请填写用户名" autocomplete="off" />
                        </div>
                        <span class="placeholder_copy placeholder_un">请填写用户名</span>
                        <div class="item b0">
                            <i class="icon-login-pwd"></i>
                            <input type="password" name="password" placeholder="请填写密码" autocomplete="off" />
                        </div>
                        <span class="placeholder_copy placeholder_pwd">请填写密码</span>
                        <div class="item verifycode">
                            <i class="icon-login-verifycode"></i>
                            <input type="text" name="verify" placeholder="请填写验证码" autocomplete="off">
                            <a class="reloadverify" title="换一张" href="javascript:void(0)">换一张？</a>
                        </div>
                        <span class="placeholder_copy placeholder_check">请填写验证码</span>
                        <div>
                            <img class="verifyimg reloadverify" alt="点击切换" src="{:U('Public/verify')}">
                        </div>
                    </div>
                    <div class="login_btn_panel">
                        <button class="login-btn" type="submit">
                            <span class="in"><i class="icon-loading"></i>登 录 中 ...</span>
                            <span class="on">登 录</span>
                        </button>
                        <div class="am-form-help"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
<!--[if lt IE 9]>
<script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<!--<![endif]-->
<script type="text/javascript">
	/* 登陆表单获取焦点变色 */
	$(".login-form").on("focus", "input", function(){
        $(this).closest('.item').addClass('focus');
    }).on("blur","input",function(){
        $(this).closest('.item').removeClass('focus');
    });

	//表单提交
	$(document)
    	.ajaxStart(function(){
    		$("button:submit").addClass("log-in").attr("disabled", true);
    	})
    	.ajaxStop(function(){
    		$("button:submit").removeClass("log-in").attr("disabled", false);
    	});

	$("form").submit(function(){
		var self = $(this);
		$.post(self.attr("action"), self.serialize(), success, "json");
		return false;

		function success(data){
			if(data.status){
				window.location.href = data.url;
			} else {
				self.find(".am-form-help").text(data.info);
				//刷新验证码
				$(".reloadverify").click();
			}
		}
	});

	$(function(){
		//初始化选中用户名输入框
		$("#itemBox").find("input[name=username]").focus();
		//刷新验证码
		var verifyimg = $(".verifyimg").attr("src");
        $(".reloadverify").click(function(){
            if( verifyimg.indexOf('?')>0){
                $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
            }else{
                $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
            }
        });

        //placeholder兼容性
            //如果支持 
        function isPlaceholer(){
            var input = document.createElement('input');
            return "placeholder" in input;
        }
            //如果不支持
        if(!isPlaceholer()){
            $(".placeholder_copy").css({
                display:'block'
            })
            $("#itemBox input").keydown(function(){
                $(this).parents(".item").next(".placeholder_copy").css({
                    display:'none'
                })                    
            })
            $("#itemBox input").blur(function(){
                if($(this).val()==""){
                    $(this).parents(".item").next(".placeholder_copy").css({
                        display:'block'
                    })                      
                }
            })
            
            
        }
	});
</script>
</body>
</html>
